<template>
  <div class="bottom-box">
    <span @click="handleClick(index)" v-for="(item, index) in list" :key="index" :class="{active:nowIndex==index}">{{ item.name }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      nowIndex: 0,
      list: [
        { name: "首页" },
        { name: "爆爆团" },
        { name: "订单" },
        { name: "我的" },
      ],
      
    };
  },
  methods:{
    handleClick(index){
        this.nowIndex=index
    }
  }
};
</script>

<style scoped>
.bottom-box {
  width: 100%;
  height: 50px;
  background-color: #fefefe;
  position: absolute;
  bottom: 0;
  display: flex;
  justify-content: space-around;
  line-height: 50px;
  border-top: 1px rgb(223, 218, 218) solid;
  border-bottom: 1px rgb(223, 218, 218) solid;
}
span {
  cursor: pointer;
}
.active{
    color: skyblue;
}
</style>